<!-- src/components/FixedSizeContainer.vue -->
<template>
  <!--  组件作用：设置固定尺寸-->
  <div class="fixed-size-container">
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue';

export default defineComponent({
  name: 'FixedSizeContainer',
  props: {
    width: {
      type: String,
      default: '1980px',
    },
    height: {
      type: String,
      default: '1080px',
    },
    overflow: {
      type: String,
      default: 'auto',
    },
  },
  setup(props) {
    onMounted(() => {
      console.log(`进入页面时，容器设置: width=${props.width}, height=${props.height}, overflow=${props.overflow}`);
    });

    return {};
  },
});
</script>

<style scoped>
.fixed-size-container {
  width: v-bind('width');
  height: v-bind('height');
  margin: auto; /* 水平居中 */
  overflow: v-bind('overflow');
}
</style>
